<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>12-事件处理</title>
</head>
<body>
  <!-- 监听事件 -->
  <div id="app1"> 
    <button @click='counter += 1'>Add</button>
    <span>点击进行加减 {{ counter }}</span>
    <button @click='counter -= 1' :disabled='counter == 0'>Sub</button>
  </div>

  <!-- 时间处理方法 -->
  <div id="app2">
    <button @click='greet'>Greet</button>
  </div>
  <!-- 内联处理器中的1方法 -->
  <div id="app3">
     <button @click='say("hi")'>Say hi</button>
     <button @click='say("what")'>Say what</button>
     <button @click='warn( $event,"Form cannot be submitted yet.")'>submit</button>
  </div>
  <div id="app4">
     <div style="width: 200px;height: 200px;background-color: pink;"
       @click='textdemo("你点击了div")'
     >
       <button  @click.stop='textdemo("你点击了btn")'>点我试试</button>
        <!-- @click.stop防止事件冒泡 -->
     </div>
  </div>
</body>
<script src="./vue1111.js"></script>
<script>
  var App1 = new Vue({
    el:'#app1',
    data:{
      counter:0
    }
  });
  var App2 = new Vue({
    el:'#app2',
    data:{
      name:'Vue.js'
    },
    methods:{
      greet(event){
        console.log(event)
        //`this` 在方法里指向当前 Vue 实例,即App2
        alert('Hello' + this.name + '!')
        if(event){
          console.log(event)
          alert(event.target.tagName)
        }
      }
    }
  });
  App2.greet();

  var App3 = new Vue({
    el:'#app3',
    data:'',
    methods:{
      say(msg){
        console.log(msg)
        alert(msg)
      },
      warn(event,message){
        if(event){
          event.preventDefault()
        }
        alert(message)
      }
    }
  });
  var App4 = new Vue({
    el:'#app4',
    methods:{
      textdemo(msg){
        console.log(msg)
      }
    }
  });
</script>
</html>